<template>
  <div class="auth-container">
    <el-tabs>
      <el-tab-pane label="待审核医生">
        <div class="dist-area">
          <v-distpicker
            hide-area
            :province="searchParamsUnDone.province"
            :city="searchParamsUnDone.city"
            @province="onChangeProvinceUnDone"
            @city="onChangeCityUnDone"
          />
        </div>
        <el-input
          v-model="searchParamsUnDone.userId"
          class="searchId"
          placeholder="键入用户ID"
          style="width: 200px"
        />
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter('unDone')"
        >
          检索
        </el-button>
        <keep-alive>
          <el-table
            :key="itemKey"
            v-loading="tableCtl.unDoneLoad"
            border
            :data="unDoneList"
            fit
            highlight-current-row
          >
            <el-table-column width="80" align="center" label="id">
              <template slot-scope="{ row }">
                <span>{{ row.auth.id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="200px">
              <template slot-scope="{ row }">
                <span>{{ row.auth.gmtCreate | dateFormat }}</span>
              </template>
            </el-table-column>
            <el-table-column label="医生ID" width="200px">
              <template slot-scope="{ row }">
                <span>{{ row.auth.userId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="医生姓名">
              <template slot-scope="{ row }">
                <span>{{ row.doctor.userName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="医生电话">
              <template slot-scope="{ row }">
                <span>{{ row.doctor.userPhone }}</span>
              </template>
            </el-table-column>
            <el-table-column label="医生位置">
              <template slot-scope="{ row }">
                <span>
                  <div>
                    {{ getLocation(row.doctor.userLocation).province }}
                  </div>
                  <div>
                    {{ getLocation(row.doctor.userLocation).city }}
                  </div>
                </span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="120"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{ row }">
                <el-button
                  type="primary"
                  size="mini"
                  @click="detailBtn(row.auth)"
                >认证详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </keep-alive>
        <el-pagination
          :page-sizes="[10, 15, 20, 25]"
          :page-size="paginationUnDone.size"
          :current-page.sync="paginationUnDone.index"
          :total="paginationUnDone.total"
          layout="sizes, prev, pager, next"
          @size-change="handlerPageSizeChangeUnDone"
          @current-change="handlerPageIndexChangeUnDone"
        />
      </el-tab-pane>
      <el-tab-pane label="审核结果一览">
        <div class="dist-area">
          <v-distpicker
            hide-area
            :province="searchParamsDone.province"
            :city="searchParamsDone.city"
            @province="onChangeProvinceDone"
            @city="onChangeCityDone"
          />
        </div>
        <el-input
          v-model="searchParamsDone.userId"
          class="searchId"
          placeholder="键入用户ID"
          style="width: 200px"
        />
        <el-button
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter('done')"
        >
          检索
        </el-button>
        <keep-alive>
          <el-table v-loading="tableCtl.doneLoad" border :data="doneList">
            <el-table-column width="80" align="center" label="id">
              <template slot-scope="{ row }">
                <span>{{ row.auth.id }}</span>
              </template>
            </el-table-column>
            <el-table-column label="创建时间" width="200px">
              <template slot-scope="{ row }">
                <span>{{ row.auth.gmtCreate | dateFormat }}</span>
              </template>
            </el-table-column>
            <el-table-column label="医生ID" width="200px">
              <template slot-scope="{ row }">
                <span>{{ row.auth.userId }}</span>
              </template>
            </el-table-column>
            <el-table-column label="医生身份证" width="200px">
              <template slot-scope="{row}">
                <span>
                  {{ row.auth.authIdentify }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="认证结果" width="80">
              <template slot-scope="{ row }">
                <el-tag effect="dark" :type="row.auth.authResult | tagFilter">
                  <span>{{ row.auth.authResult | getTagText }}</span>
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column label="认证意见">
              <template slot-scope="{ row }">
                <span>{{ row.auth.authResultContext }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              width="230"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="{row}">
                <el-button type="primary" size="mini" @click="showDetail = row.doctor;detailDialog = true">医生基本信息</el-button>
              </template>
            </el-table-column>
          </el-table>
        </keep-alive>
        <el-pagination
          :page-sizes="[10, 15, 20, 25]"
          :page-size="paginationDone.size"
          :current-page.sync="paginationDone.index"
          :total="paginationDone.total"
          layout="sizes, prev, pager, next"
          @size-change="handlerPageSizeChangeDone"
          @current-change="handlerPageIndexChangeDone"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="医生详情"
      :visible.sync="detailDialog"
      style="padding: 20px"
      width="500px"
    >
      <template v-if="showDetail !== null">
        <div class="div-container">
          医生姓名：{{ showDetail.userName }}
        </div>
        <div class="div-container">
          位置：{{ getLocation(showDetail.userLocation).province }}- {{ getLocation(showDetail.userLocation).city }}
        </div>
        <div class="div-container">
          自述： {{ showDetail.userDiscription }}
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="detailDialog=false">关闭</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      title="认证详情"
      :visible.sync="dialogVisible"
      style="padding: 20px"
      width="500px"
      :before-close="beforeDialogClose"
    >
      <div style="margin: 20px">
        <div>点击以查看大图</div>
        <div class="imageArea">
          <el-image
            style="width: 100px; height: 100px"
            :src="url"
            :preview-src-list="srcList"
          />
        </div>
        <el-input
          v-model="textarea"
          type="textarea"
          :rows="3"
          placeholder="请输入审核意见"
          style="margin-top: 20px; margin-bottom: 20px"
        />
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="processAgree">通过</el-button>
          <el-button @click="processReject">拒绝</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { req, pushAuth } from '@/api/authDoctor'
import { getLocation } from '@/utils/loc'
export default {
  filters: {
    tagFilter(tag) {
      const statusMap = {
        1: 'success',
        0: 'danger'
      }
      return statusMap[tag]
    },
    getTagText(tag) {
      const statusMap = {
        1: '通过',
        0: '拒绝'
      }
      return statusMap[tag]
    }
  },
  data() {
    return {
      doneList: null,
      unDoneList: null,
      searchParamsUnDone: {
        userId: null,
        province: null,
        city: null,
        pageSize: 10,
        pageIndex: 1,
        type: 'unDone'
      },
      searchParamsDone: {
        userId: null,
        province: null,
        city: null,
        pageSize: 10,
        pageIndex: 1,
        type: 'done'
      },
      processParam: {
        authResult: null,
        authResultContext: null
      },
      itemKey: 0,
      tableLoading: false,
      dialogVisible: false,
      baseUrl: 'http://127.0.0.1:8080/auth/downloadImage?authPath=',
      url: null,
      textarea: null,
      selectedAuth: null,
      srcList: null,
      detailDialog: false,
      showDetail: null,
      paginationUnDone: {
        size: 10,
        index: 1,
        total: 0
      },
      paginationDone: {
        size: 10,
        index: 1,
        total: 0
      },
      tableCtl: {
        doneLoad: false,
        unDoneLoad: false
      }
    }
  },
  created() {
    req(this.searchParamsDone).then((response) => {
      this.doneList = response.object.obj
      this.paginationDone.total = response.object.pageTotal
    })
    req(this.searchParamsUnDone).then((response) => {
      this.unDoneList = response.object.obj
      this.paginationUnDone.total = response.object.pageTotal
    })
  },

  methods: {
    onChangeProvinceUnDone(data) {
      this.searchParamsUnDone.province = data.value === '省' ? null : data.value
    },
    onChangeCityUnDone(data) {
      this.searchParamsUnDone.city = data.value === '市' ? null : data.value
    },
    onChangeProvinceDone(data) {
      this.searchParamsDone.province = data.value === '省' ? null : data.value
    },
    onChangeCityDone(data) {
      this.searchParamsDone.city = data.value === '市' ? null : data.value
    },
    beforeDialogClose() {
      this.textarea = null
      this.auth = null
      this.dialogVisible = false
    },
    detailBtn(data) {
      this.dialogVisible = true
      this.auth = data
      console.log(this.auth)
    },
    processAgree() {
      if (!this.textarea) {
        this.$alert('您没有填写审核意见', '错误', {
          confirmButtonText: '确定',
          type: 'error',
          center: true
        })
        return
      }
      this.auth.authResultContext = this.textarea
      this.auth.authResult = '1'
      pushAuth(this.auth).then(
        (response) => {
          this.beforeDialogClose()
          this.flushDone()
          this.flushUnDone()
        },
        (res) => {
          this.$alert('提交失败', '提交错误', {
            type: 'error',
            center: true
          })
        }
      )
    },
    processReject() {
      if (!this.textarea) {
        this.$alert('您没有填写审核意见', '错误', {
          confirmButtonText: '确定',
          type: 'error',
          center: true
        })
        return
      }
      this.auth.authResultContext = this.textarea
      this.auth.authResult = '0'
      pushAuth(this.auth).then(
        (response) => {
          this.beforeDialogClose()
          this.flushDone()
          this.flushUnDone()
        },
        (res) => {
          this.$alert('提交失败', '提交错误', {
            type: 'error',
            center: true
          })
        }
      )
    },
    getLocation(jsonStr) {
      return getLocation(jsonStr)
    },
    handlerPageSizeChangeDone(e) {
      this.paginationDone.size = e
      this.paginationDone.index = 1
      this.searchParamsDone.pageSize = e
      this.searchParamsDone.pageIndex = 1
      this.paginationDone.total = 0
      this.handleFilter('done')
    },
    handlerPageIndexChangeDone(e) {
      this.paginationDone.index = e
      this.searchParamsDone.pageIndex = e
      this.handleFilter('done')
    },
    handlerPageSizeChangeUnDone(e) {
      this.paginationUnDone.size = e
      this.paginationUnDone.index = 1
      this.searchParamsUnDone.pageSize = e
      this.searchParamsUnDone.pageIndex = 1
      this.paginationUnDone.total = 0
      this.handleFilter('unDone')
    },
    handlerPageIndexChangeUnDone(e) {
      this.paginationUnDone.index = e
      this.searchParamsUnDone.pageIndex = e
      this.handleFilter('unDone')
    },
    handleFilter(data) {
      if (data === 'unDone') {
        this.flushUnDone()
      } else if (data === 'done') {
        this.flushDone()
      }
    },
    flushDone() {
      this.tableCtl.doneLoad = true
      req(this.searchParamsDone).then((response) => {
        this.doneList = response.object.obj
        this.paginationDone.total = response.object.pageTotal
        this.tableCtl.doneLoad = false
      })
    },
    flushUnDone() {
      this.tableCtl.unDoneLoad = true
      req(this.searchParamsUnDone).then((response) => {
        this.unDoneList = response.object.obj
        this.paginationUnDone.total = response.object.pageTotal
        this.tableCtl.unDoneLoad = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/custom.scss';
.auth {
  &-container {
    padding: 20px;
  }
}
.searchId {
  margin-right: 10px;
}
.imageArea {
  align-items: center;
  justify-content: center;
}
</style>
